<link rel="import" href="../../bower/polymer/polymer.html">
<link rel='import' href='../../bower/paper-progress/paper-progress.html'>
<link rel='import' href='network-invite-user.html'>
<link rel='import' href='../../bower/core-signals/core-signals.html'>

<polymer-element name='uproxy-logs'>
  <template>
    <style>
      :host {
        background-color: #FFFFFF;
        font-family: Roboto, sans-serif;
        font-size: 13px;
      }
      #container {
        text-align: center;
         height: 100%;
         width: 100%;
         background-color: white;
      }
      #logsPanel {
        height: 100%;
        width: 100%;
        background-color: white;
      }
      uproxy-app-bar {
        text-align: left;
        font-size: 18px;
      }
      paper-progress::shadow #progressContainer {
        background-color: #ffffff;
        opacity: 0.5;
      }
      paper-progress::shadow #activeProgress {
        background-color: #12A391;
      }
      paper-progress {
        margin-bottom: 1em;
        width: 275px;
      }
      #loadingLogs {
        font-family: Roboto, sans-serif;
        text-align: center;
      }
      #logs {
        font-family: monospace;
        font-size: 14px;
        text-align: left;
        padding: 10px;
        background: lightgray;
      }
      pre {
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;  /* Firefox */
        white-space: -o-pre-wrap;    /* Firefox */
        word-wrap: break-word;
      }
      h1 {
        margin-bottom: 1em;
      }
    </style>
    <core-signals on-core-signal-open-logs="{{ openLogs }}"></core-signals>
    <core-overlay id='logsPanel'>
      <div id='container' vertical layout>
        <uproxy-app-bar on-go-back='{{ close }}'>
          {{ "LOGS_TITLE" | $$(model.globalSettings.language) }}
        </uproxy-app-bar>
        <h1><bdi>{{ "LOGS_TITLE" | $$(model.globalSettings.language) }}</bdi></h1>
        <p><bdi>{{ "TO_SEND_LOGS" | $$(model.globalSettings.language) }}</bdi></p>
        <div id='logs'>
          <div id="loadingLogs" hidden?="{{ !loadingLogs }}">
            <p>{{ "RETRIEVING_LOGS" | $$(model.globalSettings.language) }}</p>
            <paper-progress indeterminate='true'></paper-progress>
          </div>
          <pre>{{ logs }}</pre>
        </div> <!-- end of errorText -->
      </div>
    </core-overlay>
  </template>
  <script src='logs.js'></script>
</polymer-element>
